<template>
  <div>
    <h2>==========================hello1组件</h2>


    <h2>{{$store.state.moduleA.name}}</h2>
    <h2>模块A的counter:{{$store.state.moduleA.counter}}</h2>

    <h2>模块A的list的过滤方法:{{$store.getters.filterList}}</h2>
    <h2>模块A的list的过滤方法2:{{$store.getters.filterList2(2)}}</h2>
    <button @click="moduleAClick">模块A操作</button>
    <button @click="aAsyncMethod1">模块A异步操作</button>
    <h2>{{$store.state.moduleB.name}}</h2>

    <button @click="asyncBtnClick">异步操作按钮</button>
    <button @click="asyncBtnClick2">异步之后再回调</button>

    <h2>{{$store.state.counter}}</h2>

    <h2>显示年龄大于等于16的学生信息:</h2>
    <h2>{{$store.getters.ageGte16}}</h2>


    <h2>显示年龄大于等于n的学生信息:</h2>
    <h2>{{$store.getters.ageGteN(17)}}</h2>
    <h2>==========================hello1组件结尾</h2>

  </div>
</template>

<script>
export default {
  name: "Hello1",
  methods: {
    /**
     * 1秒之后修改counter+1
     */
    asyncBtnClick(){
      this.$store.dispatch("counterInc",1)
    },
    /**
     * 1 秒之后 修改 counter+2
     * 但是成功之后进行回调
     */
    asyncBtnClick2(){
      this.$store.dispatch("counterInc2",{value:2,success:(data)=>{
          console.log("回调打印:====="+data);
        }})
    },
    /**
     * 有个疑问 vuex 实例 和 moduleA的方法同名怎么办？ 因为修改 vuex 实例 里面的属性也是this.$store.commit
     * 修改moduleA 的属性也是this.$store.commit
     * 自己测试一下吧
     *
     * 测试发现 会先去调用vuex 实例里面的方法然后在去调用模块A里面的方法
     * 综上所述，最好还是不要重名，模块A的方法最好都加上前缀 moduleA 这样比较合理
     */
    moduleAClick(){
      this.$store.commit("counterHandler",1)
      //this.$store.commit("inc",1)
    },
    aAsyncMethod1(){
      this.$store.dispatch("aAsyncMethod1",1)
    }

  }
}
</script>

<style scoped>

</style>
